对使用jsonp进行跨域获取数据的三个项目的总结
/ / 点击 / 阅读耗时 3 分钟这篇是对使用API搜集需要的数据并传回到app中的总结。涉及三个应用:random quote、local weather以及wikipedia viewer。实质是利用jsonp进行跨域请求。
1. jsonp的介绍和使用
这篇文章是我目前见过的对jsonp最清晰和简单的描述,感谢这位大神!
2. random quote
第一次接触api的应用,由于今年6月codepen开始全面使用https协议,所以原本使用http的api已经无法正常显示,目前没有找到好的解决办法。
使用的api地址如下:
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
endpoint: http://api.forismatic.com/api/1.0/
?: 端点和参数的分割
=: 匹配参数和参数值
&: 连接两个不同的参数
jsonp=?: jsonp是callback,即获得回调函数名的参数名,等号后面可以写回调函数名,写?则会由jQuery自动处理。
一个简单的实践:
function randomQuote() {
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?";
$.getJSON(url, function(json) {
$("#quote").text(json.quoteText);
$("#author").text("--" + json.quoteAuthor);
});
}
返回的数据依照相应的参数名进行调用即可。
3. local weather
这个应用使用了两个api。
获取天气数据使用了darksky的api:
“https://api.darksky.net/forecast/37afbe1af1965b09f5c7e0c6f710fc34/" + latitude + “,” + longitude + “/?units=auto&callback=?”
获取位置数据使用了google map的api:
google_map_url = “https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + “,” + longitude + “&key=xxxxxxx&language=en”
其中的latitude和longitude是使用navigator.geolocation.getCurrentPosition()获取的,详细文档点击此处,简单的使用方法如下:
navigator.geolocation.getCurrentPosition(function(position) {
var latitude;
var longitude;
latitude = position.coords.latitude;
longitude = position.coords.longitude;
//其他函数
}
4. wikipedia viewer
Wikipedia的api使用起来感觉相当复杂,点击此处的使用文档。下面是应用中对地址的具体表示:
var val = $(“#search”).val() + “&callback=?”;
url += val;
5. 实际跨域调用
使用jQuery的getJson函数。
$.getJSON(google_map_url, function(json){//});